<template>
	<view class="category">
		<!-- 搜素框 -->
		<view class="header">
			<view class="search">
				<text class="iconfont icon-sousu"></text>
				<input type="text" placeholder="请输入搜素关键字" class="text" placeholder-class="color:#aaa">
			</view>
		</view>
		<!-- main -->
		<view class="main">
			<view class="left">
				<view class="leftItem" :class="{active:currentIndex === index }" @click="currentIndex = index" v-for="(left,index) in categoryList":key="left.classifyId">{{left.classifyName}}</view>
			</view>
			<view class="right">
				<scroll-view scroll-y="true" enable-flex class="scroll">
					<view class="scrollItem">
						<view class="top">
							<image class="scrollImg" :src="bannerImg[0].image" mode=""></image>
						</view>
						<!-- 组件位置 -->
						<Floor v-for="(banner,index) in bannerInfo.second":key="index" :banner = "banner"></Floor>
					</view>
				</scroll-view>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	import Floor from './components/Floor/floor.vue'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				currentIndex:0,
			};
		},
		components:{
			Floor
		},
		mounted() {
			this.getCategoryList()
		},
		methods:{
			getCategoryList(){
				this.$store.dispatch('category/getCategoryList')
			}
		},
		computed:{
			...mapState('category',['categoryList']),
			bannerInfo(){
					return this.categoryList[this.currentIndex] || {}
			},
			bannerImg(){
					return this.bannerInfo.banner || {}
			}
		}
		
	}
</script>

<style lang="stylus">
	.category
		.header
			position:fixed
			top: 0
			width: 100%
			height: 96upx
			box-sizing: border-box
			border-bottom: 2upx solid #A9A9A9
		 .search
				position: relative
				left: 50%
				top: 50%
				transform: translate(-50%,-50%)
				height: 64upx
				width: 700upx
				display: flex
				border: 2upx solid #aaa
				box-sizing: border-box
				background-color: #f8f8f8
				border-radius: 50upx
				.iconfont
					height: 64upx
					text-align: center
					line-height: 64upx
					font-size: 50upx
					color: #aaa
					padding: 0 10upx
				.text
					line-height: 64upx
					height: 64upx
		.main
			position: fixed
			display: flex
			top: 96upx
			.left
				width: 168upx
				height: 1118upx
				padding: 54upx 12upx
				box-sizing: border-box
				.leftItem
					width:140upx
					height: 50upx
					margin: 0 0 34upx 
					font-weight: bold
					box-sizing: border-box
					text-align: center
					&.active
						background-color: #f6ebea
						color: #d85f57
						border-radius: 4upx
			.right
				.scroll
					height: calc(100Vh - 96upx)
					border-left: 2upx solid #A9A9A9
					.scrollItem
						.top
							width: 584upx
							border-bottom: 2upx solid #A9A9A9
							padding: 36upx 0
							box-sizing: border-box
							.scrollImg
								width: 534upx
								height: 276upx
								margin:  0 auto
								display: block
								border-radius: 20upx
								
								
							
					
</style>
